<!--系统样式配置-->
<template>
    <div>
        <a-card>
            <p slot="title">
                系统样式配置
            </p>
          <a-tabs @change="changeTab" :animated="false">
                <a-tab-pane v-for="item in tabListData" :key="item.value" :tab="item.label" :name="item.value">
                    <div v-if="currentTabName === '0'">
                        <div class="yStyleBox">
                            <div class="tit">登录页LOGO
                                <a-button type="primary" @click="saveApply('logonLogo','登录页LOGO')">保存</a-button>
                            </div>
                            <div class="mainBox">
                                <div class="handFileBox">
                                    <a href="javascript:;">
                                        <input ref="revFile" type="file" name="applyFileCert"
                                               accept=".jpg,.png,.bmp,.gif"
                                               @change="onChangeFile($event,'logonLogo')"
                                               required />
                                        <a-icon type="ios-cloud-upload" class="iconSpan"></a-icon>
                                        <br />选择或拖拽到此处<br />
                                        <em>{{updateFileNameCert}}</em>
                                    </a>
                                    <div class="errorStyle">{{errorMsg}}</div>
                                </div>
                                <div class="mainMsg">仅限jpg，png，bmp，gif文件格式<br />图片宽度不超过85像数<br />图片高度不超过85像数<br />图片大小小于25KB<br /></div>
                                <div class="mainSL dllogo" :style="'backgroundImage:url('+sendObj.backgroundImage+')'">
                                    <div class="uplogoBg"><img :src="sendObj.logonLogo"/></div>
                                </div>
                            </div>
                        </div>
                        <div class="yStyleBox">
                            <div class="tit">前台系统LOGO
                                <a-button type="primary" @click="saveApply('headerLogo','前台系统Logo')">保存</a-button>
                            </div>
                            <div class="mainBox">
                                <div class="handFileBox">
                                    <a href="javascript:;">
                                        <input ref="revFile2" type="file" name="applyFileCert"
                                               accept=".jpg,.png,.bmp,.gif"
                                               @change="onChangeFile2($event)"
                                               required />
                                        <a-icon type="ios-cloud-upload" class="iconSpan"></a-icon>
                                        <br />选择或拖拽到此处<br />
                                        <em>{{updateFileName}}</em>
                                    </a>
                                    <div class="errorStyle">{{errorMsg2}}</div>
                                </div>
                                <div class="mainMsg">仅限jpg，png，bmp，gif文件格式<br />图片宽度不超过85像数<br />图片高度不超过85像数<br />图片大小小于25KB<br /></div>
                                <div class="mainSL">
                                    <div class="beforeLogo">
                                        <div class="uplogoBg"><img :src="sendObj.headerLogo"/></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="currentTabName === '1'">
                        <div class="yStyleBox">
                            <div class="tit">登录页系统名称全称
                            </div>
                            <div class="mainBox">
                                <a-form ref="sysUserDtos" :model="sysUserDtos" :label-width="0" layout="inline">
                                    <a-form-item label=""  style="position: relative">
                                        <a-input v-model="sysUserDtos.companyName" placeholder="请输入系统名称全称" style="width: 350px" @blur="validateText(sysUserDtos.companyName,'companyName')"/>
                                        <div class="errorStyle errStyle2">{{errorMsg}}</div>
                                    </a-form-item>
                                    <a-button type="primary" style="margin-left: 30px"  @click="saveApply('companyName','登录页系统名称全称')">保存</a-button>
                                </a-form>
                                <div class="mainSL dllogo"  style="float: left; margin-top: 25px;"  :style="'backgroundImage:url('+sendObj.backgroundImage+')'">
                                    <div class="uplogoBg"></div>
                                    <div class="uplogoName">{{sendObj.companyName}}</div>
                                </div>
                                <div class="mainMsg" style="margin-top: 100px;">请输入汉字、字母、数字、_或-字符<br />最多可输入15个字符<br /></div>
                            </div>
                        </div>
                        <div class="yStyleBox">
                            <div class="tit">前台系统名称简称</div>
                            <div class="mainBox">
                                <a-form ref="sysUserDtos" :model="sysUserDtos" :label-width="0" layout="inline">
                                    <a-form-item label="" style="position: relative">
                                        <a-input v-model="sysUserDtos.companyShortName"  placeholder="请输入系统名称简称" style="width: 350px" @blur="validateText(sysUserDtos.companyShortName,'companyShortName')"/>
                                        <div class="errorStyle errStyle2">{{errorMsg2}}</div>
                                    </a-form-item>
                                    <a-button type="primary" style="margin-left: 30px"  @click="saveApply('companyShortName','前台系统名称简称')">保存</a-button>
                                </a-form>
                                <div class="mainSL" style="float: left; margin-top: 25px;">
                                    <div class="beforeLogo">
                                        <div class="uplogoBg"></div>{{sendObj.companyShortName}}
                                    </div>
                                </div>
                                <div class="mainMsg" style="margin-top: 100px;">请输入汉字、字母、数字、_或-字符<br />最多可输入7个字符<br /></div>
                            </div>
                        </div>
                    </div>
                    <div v-if="currentTabName === '2'">
                        <div class="yStyleBox">
                            <div class="tit">登录页版权所有
                            </div>
                            <div class="mainBox">
                                <a-form ref="sysUserDtos" :model="sysUserDtos" :label-width="0"  layout="inline"
                                      @keydown.native.enter.prevent="">
                                    <a-form-item label="" prop="searchKey">
                                        <a-input v-model="sysUserDtos.copyRight" placeholder="请输入版权所有" style="width: 350px" @blur="validateText(sysUserDtos.copyRight,'copyRight')"/>
                                        <div class="errorStyle errStyle2">{{errorMsg}}</div>
                                    </a-form-item>
                                    <a-button type="primary" style="margin-left: 30px" @click="saveApply('copyRight','登录页版权所有')">保存</a-button>
                                </a-form>
                                <div class="mainSL dllogo"  style="float: left; margin-top: 25px;"  :style="'backgroundImage:url('+sendObj.backgroundImage+')'">
                                    <div class="bqsy">© {{sendObj.copyRight}}</div>
                                </div>
                                <div class="mainMsg" style="margin-top: 100px;">请输入汉字、字母、数字、_或-字符<br />最多可输入15个字符<br /></div>
                            </div>
                        </div>
                    </div>
                    <div v-if="currentTabName === '3'">
                        <div class="yStyleBox">
                            <div class="tit">系统风格设置
                            </div>
                            <div class="mainBox">
                                <a-form ref="sysUserDtos" :model="sysUserDtos" :label-width="0"  layout="inline"
                                      @keydown.native.enter.prevent="">
                                    <a-radio-group v-model="sendObj.pageStyle"  @change="change_color" style="margin-left: 10px; width: 120px">
                                        <a-radio v-for="item in pageStyleList" :value="item.value" :key="item.value" style="margin-bottom: 10px">{{ item.label }}<em class="colorCode" :style="'background:'+item.code+''"></em></a-radio>
                                    </a-radio-group>
                                </a-form>
                                <a-button type="primary" style="margin-left: 10px"  @click="saveApply('pageStyle','系统风格设置')">保存</a-button>
                            </div>
                        </div>
                    </div>
                    <div v-if="currentTabName === '4'">
                        <div class="yStyleBox">
                            <div class="tit">登录页背景设置
                                <a-button type="primary" @click="saveApply('backgroundImage','登录页背景设置')">保存</a-button>
                            </div>
                            <div class="mainBox">
                                <div class="handFileBox">
                                    <a href="javascript:;">
                                        <input ref="revFile" type="file" name="applyFileCert"
                                               accept=".jpg,.png,.bmp,.gif"
                                               @change="onChangeFile($event,'backgroundImage')"
                                               required />
                                        <a-icon type="ios-cloud-upload" class="iconSpan"></a-icon>
                                        <br />选择或拖拽到此处<br />
                                        <em>{{updateFileNameCert}}</em>
                                    </a>
                                    <div class="errorStyle">{{errorMsg}}</div>
                                </div>
                                <div class="mainMsg">仅限jpg，png，bmp，gif文件格式<br />图片宽度需超过1920像数<br />图片高度超过1080像数<br />图片大小小于250KB<br /></div>
                                <div class="mainSL dllogo" :style="'backgroundImage:url('+sendObj.backgroundImage+')'"></div>
                            </div>
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-card>
        <div class="spinBox" v-if="spinning">{{spinText}}</div>
    </div>
</template>

<script>
    const regSearchText = /^[\u4e00-\u9fa5_a-zA-Z0-9-]+$/
    import { mapState, mapActions } from 'vuex'
    export default {
        name: 'sys_style',
      data () {
            return {
                title: true,
                tabListData: [ {'label': 'logo设置', 'value': '0'}, {
                    'label': '系统名称设置',
                    'value': '1'
                }, {'label': '版权所有设置', 'value': '2'}, {'label': '系统风格设置', 'value': '3'}, {'label': '登录页背景设置', 'value': '4'}  ],
                currentTabName:'0',
                currentTabNameValue:'0',
                currentTabLable:'',
                searchKey: '',
                spinning:false,
                spinText:'请稍后...',
                sysUserDtos:{
                    companyName:'',
                    companyShortName:'',
                    copyRight:'',
                },
                updateFileCert:'',
                updateFileNameCert:'',
                errorMsg:'',
                errorMsg2:'',
                sendObj:{
                    companyName:'',
                    companyShortName:'',
                    pageStyle:'',
                    copyRight:'',
                    backgroundImage:'',
                    logonLogo:'',
                    headerLogo:'',
                },
                regSearchText,
                updateFile:'',
                updateFileName:'',
                isLogoChange:false,
                isHeartLogoChange:false,
                isBgChange:false,
                pageStyleList: [
                    {'label': '深蓝色', 'value': 'darkBlue', code: '#052b5a'},
                    {'label': '群青色', 'value': 'groupGreen', code: '#01196f'},
                    {'label': '深绿色', 'value': 'inkGreen', code: '#043e3e'},
                    {'label': '青色', 'value': 'cyan', code: '#043b5a'},
                    {'label': '浅青色', 'value': 'shallowCyan', code: '#017b92'},
                    {'label': '浅绿色', 'value': 'shallowGreen', code: '#097070'},
                    {'label': '灰绿色', 'value': 'ashGreen', code: '#47634e'},
                    {'label': '浅蓝色', 'value': 'shallowBlue', code: '#076ee2'},
                ]
            };
        },
        computed: {

        },
        watch:{

        },
        methods: {
            // setGlobalState 是在 /common/src/store/global-register.js中定义的
            ...mapActions('global', ['setGlobalState']),
            changeUsername (sendData) {
                // 也可通过 store.commit('global/setGlobalState', { user: '李四' }) 进行操作
                this.setGlobalState({
                    user: { name: '李四' + Math.round(Math.random() * 100) },
                    styleObj:sendData
                })
            },
            change_color(name){
                document.getElementById('main').classList.remove(sessionStorage.getItem('pageStyle'));
                document.getElementById('main').className = this.sendObj.pageStyle
            },
            /**
             * Function    : validateSearchText
             * Description : 对搜索框的校验
             * Input       : index,ip
             * Return      : None
             */
            validateText ( text, type ) {
                text = text || ''
                let reg = this.regSearchText
                let msg = ''
                msg = text ? ( reg.test (text) ? '' : '请输入汉字、字母、数字、_或-字符' ) : ''
                if (type === 'companyShortName') {
                    if (text.length > 7) {
                        text = text.substring (0, 7)
                    }
                    this.errorMsg2 = msg
                } else {
                    if (text.length > 15) {
                        text = text.substring (0, 15)
                    }
                    this.errorMsg = msg
                }
                if(text !== '' && text !== null && text !== undefined){
                    this.sysUserDtos[ type ] = text
                }

                if(this.errorMsg === '' && text !== '' && text !== null && text !== undefined){
                    this.sendObj[ type ] = text
                }
            },
            /**
             * Function    : changeTab
             * Description : 切换tab页面
             * Input       : name  tab中指定名称
             * Return      : none
             */
            changeTab ( name ) {
                this.currentTabName = name;
                this.errorMsg = ''
                this.errorMsg2 = ''
                this.updateFile = ''
                this.updateFileName = ''
                this.updateFileCert = ''
                this.updateFileNameCert = ''
                //this.init()
                this.sysUserDtos={
                    companyName:'',
                    companyShortName:'',
                    copyRight:'',
                }
            },

            /**
             * Function    : init
             * Description : 初始化列表
             * Input       : none
             * Return      : none
             */
            init () {
                let _this = this
                _this.sendObj = {
                    companyName: sessionStorage.getItem ('companyName'),
                    companyShortName: sessionStorage.getItem ('companyShortName'),
                    pageStyle: sessionStorage.getItem ('pageStyle'),
                    copyRight: sessionStorage.getItem ('copyRight'),
                    backgroundImage: localStorage.getItem ('backgroundImage'),
                    logonLogo: localStorage.getItem ('logonLogo'),
                    headerLogo: localStorage.getItem ('headerLogo'),
                }
                document.getElementById('main').className = _this.sendObj.pageStyle
            },
            /**
             * 选择文件
             */
            onChangeFile ( e ,type) {
                let _this = this;
                _this.isLogoChange = false;
                _this.isBgChange = false;
                if (e.target.files[ 0 ] === undefined) {
                    _this.updateFileCert = '';
                    _this.updateFileNameCert = ''
                } else {
                    _this.updateFileCert = e.target.files[ 0 ];
                    _this.updateFileNameCert = e.target.files[ 0 ].name;
                    _this.errorMsg = '';
                    let indexDot = _this.updateFileNameCert.lastIndexOf ('.');
                    let typeName = _this.updateFileNameCert.substr (indexDot + 1, 3);
                    if (typeName !== 'jpg' && typeName !== 'png' && typeName !== 'bmp' && typeName !== 'gif') {
                        _this.errorMsg = '请选择jpg，png，bmp，gif文件格式';
                        _this.updateFileCert = '';
                        return
                    } else {
                        let size = e.target.files[ 0 ].size;
                        if(type === 'logonLogo'){
                            let mSize = 25 * 1024;
                            if (size > mSize) {
                                _this.errorMsg = '请选择小于25KB的文件';
                                _this.updateFileCert = '';
                                return
                            }
                        }else{
                            let mSize = 250 * 1024;
                            if (size > mSize) {
                                _this.errorMsg = '请选择小于250KB的文件';
                                _this.updateFileCert = '';
                                return
                            }
                        }
                    }
                    _this.isChange = true;
                    let oFReader = new FileReader ();
                    oFReader.readAsDataURL (_this.updateFileCert);
                    oFReader.onloadend = function ( oFRevent ) {
                        if (type === 'logonLogo') {
                            _this.isLogoChange = true;
                            _this.sendObj.logonLogo = oFRevent.target.result
                        } else if (type === 'backgroundImage') {
                            _this.isBgChange = true;
                            _this.sendObj.backgroundImage = oFRevent.target.result
                        }
                        if (_this.$refs.revFile !== undefined) {
                           for(let i=0; i<_this.$refs.revFile.length; i++){
                               _this.$refs.revFile[i].value = ''
                           }
                        }
                    }
                }
            },
            onChangeFile2 ( e ) {
                let _this = this
                _this.isHeartLogoChange = false
                if (e.target.files[ 0 ] === undefined) {
                    _this.updateFile = ''
                    _this.updateFileName = ''
                } else {
                    _this.updateFile = e.target.files[ 0 ]
                    _this.updateFileName = e.target.files[ 0 ].name
                    _this.errorMsg2 = ''
                    let indexDot = _this.updateFileName.lastIndexOf ('.')
                    let typeName = _this.updateFileName.substr (indexDot + 1, 3)
                    if (typeName !== 'jpg' && typeName !== 'png' && typeName !== 'bmp' && typeName !== 'gif') {
                        _this.errorMsg2 = '请选择jpg，png，bmp，gif文件格式'
                        _this.updateFile = ''
                        return
                    } else {
                        let size = e.target.files[ 0 ].size
                        let mSize = 25 * 1024
                        if (size > mSize) {
                            _this.errorMsg2 = '请选择小于25KB的文件'
                            _this.updateFile = ''
                            return
                        }
                    }
                    let oFReader = new FileReader ()
                    oFReader.readAsDataURL (_this.updateFile)
                    oFReader.onloadend = function ( oFRevent ) {
                        _this.sendObj.headerLogo = oFRevent.target.result
                        _this.isHeartLogoChange = true
                        if (_this.$refs.revFile2 !== undefined) {
                            _this.$refs.revFile2.value = ''
                        }
                    }
                }
            },
            /**
             * Function    : saveApply
             * Description : 用户信息新增、编辑保存
             * Input       : name
             * Return      : none
             */
            saveApply ( name,typeName ) {
                let _this = this
                let msg = '请选择jpg，png，bmp，gif文件格式'
                if (name === 'logonLogo' || name === 'backgroundImage') {
                    if (_this.updateFileNameCert === '') {
                        _this.errorMsg = msg
                    }
                    if (_this.errorMsg !== undefined && _this.errorMsg !== '') {
                        return
                    }
                } else if (name === 'headerLogo') {
                    if (_this.updateFileName === '') {
                        _this.errorMsg2 = msg
                    }
                    if (_this.errorMsg2 !== undefined && _this.errorMsg2 !== '') {
                        return
                    }
                } else if (name === 'companyName') {
                    if (_this.sysUserDtos.companyName === '') {
                        _this.errorMsg = '请输入系统名称全称'
                    }
                    if (_this.errorMsg !== undefined && _this.errorMsg !== '') {
                        return
                    }
                } else if (name === 'companyShortName') {
                    if (_this.sysUserDtos.companyShortName === '') {
                        _this.errorMsg2 = '请输入系统名称简称'
                    }
                    if (_this.errorMsg2 !== undefined && _this.errorMsg2 !== '') {
                        return
                    }
                } else if (name === 'copyRight') {
                    if (_this.sysUserDtos.copyRight === '') {
                        _this.errorMsg = '请输入版权所有'
                    }
                    if (_this.errorMsg !== undefined && _this.errorMsg !== '') {
                        return
                    }
                }
                let formData = new FormData ()
                _this.spinning = true
                if (name === 'headerLogo') {
                    formData.append ('headerLogo', _this.updateFile)
                } else if (name === 'logonLogo') {
                    formData.append ('logonLogo', _this.updateFileCert)
                } else if (name === 'backgroundImage') {
                    formData.append ('backgroundImage', _this.updateFileCert)
                }else if (name === 'companyName') {
                    formData.append ('companyName',  _this.sysUserDtos.companyName)
                    formData.append ('backgroundImage','')
                } else if (name === 'companyShortName') {
                    formData.append ('companyShortName',  _this.sysUserDtos.companyShortName)
                    formData.append ('backgroundImage','')
                } else if (name === 'pageStyle') {
                    formData.append ('pageStyle',  _this.sendObj.pageStyle)
                    formData.append ('backgroundImage','')
                } else {
                    formData.append ('copyRight', _this.sysUserDtos.copyRight)
                    formData.append ('backgroundImage','')
                }
                _this.$uploadPost ('api/sysstyleinfo/saveOrUpdSysStyleInfo', formData).then (res => {
                    if (res.code === 0) {
                        _this.updateFileNameCert = ''
                        _this.updateFileName = ''
                        if(name === 'companyName' || name === 'companyShortName' || name === 'copyRight' || name === 'pageStyle'){
                            _this.getSysStyleInfo();
                        }
                        if(name === 'headerLogo'){
                            localStorage.setItem ('headerLogo', _this.sendObj.headerLogo)
                            let sendData = {
                                headerLogo: _this.sendObj.headerLogo,
                                companyShortName: _this.sendObj.companyShortName,
                                companyName: _this.sendObj.companyName,
                                pageStyle: _this.sendObj.pageStyle,
                                copyRight: _this.sendObj.copyRight,
                            }
                            _this.$store.dispatch ('setStyleObj', sendData)
                            _this.changeUsername(sendData)
                        }
                        if(name === 'backgroundImage'){
                            _this.isBgChange = false
                            localStorage.setItem ('backgroundImage', _this.sendObj.backgroundImage)
                        }
                        if(name === 'logonLogo'){
                            localStorage.setItem ('logonLogo', _this.sendObj.logonLogo)
                        }
                        _this.spinning = false
                        _this.$message.success (typeName+'修改成功')
                    } else {
                        _this.$message.error (res.message)
                    }
                    if (_this.$refs.revFile !== undefined) {
                        _this.$refs.revFile.value = ''
                    }
                    _this.updateFile = ''
                    _this.spinning = false
                })

            },
            getSysStyleInfo () {
                let _this = this
                this.$get ('api/sysstyleinfo/getSysStyleInfo').then (res => {
                    if (res.code === 0) {
                        _this.sendObj.companyName = res.data.companyName
                        _this.sendObj.companyShortName = res.data.companyShortName
                        _this.sendObj.pageStyle = res.data.pageStyle
                        _this.sendObj.copyRight = res.data.copyRight
                        sessionStorage.setItem ('companyName', _this.sendObj.companyName)
                        sessionStorage.setItem ('pageStyle', _this.sendObj.pageStyle)
                        let sendData = {
                            headerLogo: _this.sendObj.headerLogo,
                            companyShortName: _this.sendObj.companyShortName,
                            companyName: _this.sendObj.companyName,
                            pageStyle: _this.sendObj.pageStyle,
                            copyRight: _this.sendObj.copyRight,
                        }
                        _this.$store.dispatch ('setStyleObj', sendData)
                        _this.changeUsername(sendData)

                    } else {
                        _this.$message.error (res.message)
                    }
                }).catch (() => {
                    _this.$message.error ('系统错误')
                })
            },
        },


        /**
         * Function    : created
         * Description : 创建 钩子函数
         * Input       : none
         * Return      : none
         */
        created () {
            this.init();
            this.getSysStyleInfo();
        },
        mounted () {

        },

        /**
         * Function    : destroyed
         * Description : 销毁 钩子函数
         * Input       : none
         * Return      : none
         */
        destroyed(){

        },
    };
</script>
<style lang="less" scoped>
.apply-title-btn-wrap{ margin-top:-52px}
    .errorStyle{ width: 100%; height: 20px; line-height: 20px; position: absolute; left: 0px; color: red}
.colorCode{ width: 20px; height:20px;display: inline-block; float: right; margin-left:10px; }
    .errStyle2{
        width: 300px;
        top:38px;
        left:-345px;
    }
</style>
